<template>
  <h1>vue3 reactive函数的用法</h1>
  <hr />
  <ul>
    <!-- <li>{{ obj.name }}</li>
    <li>{{ obj.age }}</li> -->
    <li>{{ name }}</li>
    <li>{{ age }}</li>
    <li>
      <button @click="changeObj">reactive的修改</button>
    </li>
    <li>{{ list.list }}</li>

  </ul>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup () {
    const obj = reactive({
      name: 'cp',
      age: 18
    })

    const list = reactive({
      list: [1, 2, 3, 4]
    })

    const changeObj = () => {
      obj.age = Math.random() * 100
    }
    return {
      obj, changeObj, list, ...toRefs(obj)
    }
  }
}
</script>
